<template>
  <div>
    <div>
      <div class="div_yanxuan">
        <span @click="next"><</span>
        <span>严选专栏</span>
        <span></span>
      </div>
      <div>
        <ul>
          <li v-for="(item,index) in yanxuanlist" :key="index" class="li_yanxuan">
            <img :src="item.pic" />
            <div class="div_yanxuan_min">
              <p>{{item.title}}</p>
              <p>{{item.descript}}</p>
              <p @click="addDetail(item.id)">点击详情</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        yanxuanlist:[]
    };
  },
  mounted() {
      this.$APL.NEWSLIST().then(res=>{
          // console.log(res.data.data);
          this.yanxuanlist=res.data.data
      })
  },

  methods: {
      next(){
          window.history.back()  //返回事件
      },
      //点击详情
      addDetail(id){
        this.$router.push({path:'/detail',query:{id}})
      },


  },
};
</script>

<style lang="scss">
.div_yanxuan {
  width: 100%;
  height: 1rem;
  background: goldenrod;
  display: flex;
  align-items: center;
  justify-content: space-around;
//   position: relative;
  span {
    &:nth-child(1) {
      font-size: 0.5rem;
    }
  }
}
.li_yanxuan{
    width: 100%;
    height: 4rem;
    margin-top: 0.2rem;
    img{
        width: 100%;
        height: 4rem;
    }
    p{
        height: 0.8rem;
        &:nth-child(1){
            font-size: 0.3rem;
        }
          &:nth-child(2){
            font-size: 0.2rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        &:nth-child(3){
            width: 1.5rem;
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
            // border: 2px solid whitesmoke;
            background: greenyellow;
            z-index: 999;
            border-radius: 0.2rem;
            border: 0;
        }
    }
}
.div_yanxuan_min{
   width: 100%;
//    background: red;
   height: 1.5rem;
   margin-top: -2.5rem;
   color: white;
}
</style>